<template>
  <view class="w-full min-h-screen bg-[#f5f5f5] max-w-[750rpx] mx-auto box-border pb-[120rpx]">
    <!-- 顶部tab -->
    <view class="flex w-full bg-white shadow-md sticky top-0 z-10">
      <view
        v-for="(tab, idx) in tabs"
        :key="tab"
        class="flex-1 text-center py-[28rpx] text-[30rpx] cursor-pointer transition-all"
        :class="[
          activeTab === idx
            ? 'text-[#165DFF] font-bold border-b-[6rpx] border-[#165DFF] bg-[#f5faff]' :
            'text-[#999] font-normal border-b-[6rpx] border-transparent'
        ]"
        @click="switchTab(idx)"
      >
        {{ tab }}
      </view>
    </view>
    <!-- 下拉刷新区域 -->
    <view>
      <!-- 课程列表 -->
      <view class="p-[24rpx]">
        <view v-if="filteredCourses.length">
          <view
            v-for="item in filteredCourses"
            :key="item.id"
            class="bg-white rounded-2xl shadow-md p-[28rpx] mb-[24rpx] flex gap-x-4 items-center"
          >
            <image :src="item.cover" class="w-[140rpx] h-[140rpx] rounded-xl object-cover bg-[#e6eaf2] mr-[24rpx]" />
            <view class="flex-1 min-w-0">
              <view class="font-bold text-[30rpx] mb-[10rpx] line-clamp-2">{{ item.title }}</view>
              <view class="flex gap-x-8 text-[24rpx] text-[#666] mb-[8rpx]">
                <view>{{ item.students }}人学习</view>
                <view>{{ item.lessons }}课时</view>
              </view>
              <view class="text-[#FF4D4F] text-[30rpx] font-bold">¥{{ item.price }}</view>
            </view>
          </view>
        </view>
        <view v-else class="text-center py-[100rpx] text-[#999] text-[28rpx]">暂无课程</view>
      </view>
      <!-- 底部下一页 -->
      <view class="flex justify-center items-center py-[32rpx]">
        <nut-button type="primary" class="rounded-2xl text-[28rpx] px-[64rpx] bg-[#165DFF]" @click="loadMore" :disabled="noMore">{{ noMore ? '没有更多了' : '下一页' }}</nut-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'

/**
 * 课程列表页面
 * @description 顶部tab切换分类，课程列表，下拉刷新，底部下一页，严格按设计稿和Cursor规则实现。
 * @performance 只渲染当前tab内容，mock数据，移动端适配。
 */

const tabs = ['全部', '前端', '后端', '移动', '设计']
const activeTab = ref(0)
const refreshing = ref(false)
const page = ref(1)
const pageSize = 6
const noMore = ref(false)
const loading = ref(false)

const allCourses = ref([
  { id: 1, title: 'JavaScript高级程序设计', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 128, lessons: 36, price: 199, category: '前端' },
  { id: 2, title: 'Vue.js从入门到实战', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 98, lessons: 24, price: 129, category: '前端' },
  { id: 3, title: 'React Native跨平台开发', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 76, lessons: 30, price: 159, category: '移动' },
  { id: 4, title: 'Node.js后端开发', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 54, lessons: 28, price: 149, category: '后端' },
  { id: 5, title: 'HTML5与CSS3基础教程', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 128, lessons: 20, price: 99, category: '前端' },
  { id: 6, title: 'UI设计基础', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 60, lessons: 18, price: 89, category: '设计' },
  { id: 7, title: '小程序开发实战', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 80, lessons: 22, price: 139, category: '移动' },
  { id: 8, title: 'Python全栈开发', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 110, lessons: 40, price: 209, category: '后端' },
  { id: 9, title: 'Web前端工程化', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 70, lessons: 16, price: 119, category: '前端' },
  { id: 10, title: '移动端UI设计', cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', students: 45, lessons: 12, price: 79, category: '设计' }
])

const filteredCourses = ref([] as typeof allCourses.value)

function filterCourses() {
  let list = allCourses.value
  if (activeTab.value > 0) {
    list = list.filter(c => c.category === tabs[activeTab.value])
  }
  filteredCourses.value = list.slice(0, page.value * pageSize)
  noMore.value = filteredCourses.value.length >= list.length
}

function switchTab(idx: number) {
  activeTab.value = idx
  page.value = 1
  noMore.value = false
  filterCourses()
}

function loadData() {
  page.value = 1
  noMore.value = false
  filterCourses()
}

function onRefresh() {
  setTimeout(() => {
    loadData()
    refreshing.value = false
  }, 800)
}

function fetchRecords() {
  if (noMore.value || loading.value) return
  loading.value = true
  setTimeout(() => {
    page.value += 1
    filterCourses()
    loading.value = false
  }, 800)
}

function loadMore() {
  fetchRecords()
}

// Taro原生下拉刷新（小程序/APP）
usePullDownRefresh(() => {
  loadData()
  setTimeout(() => {
    Taro.stopPullDownRefresh()
  }, 1000)
})

// Taro原生触底加载下一页（小程序/APP）
useReachBottom(() => {
  fetchRecords()
})

// 初始化
onMounted(() => {
  filterCourses()
})
</script> 